<script setup lang="ts" name="Breadcrumb">

import { useRoute, useRouter} from "vue-router";
import {computed} from "vue";

const route = useRoute()
const router = useRouter()
const handleLink = (item: Menu.MenuOptions) => {
    router.push({
        path: item.path
    })
}

const matched = computed(():Menu.MenuOptions[] => {
    const arr_matched = route.matched as Menu.MenuOptions[]
    return  arr_matched.filter((item: Menu.MenuOptions) => {
       return  item.meta &&
        item.meta.title &&
        item.meta.breadcrumb !== false &&
        item.children?.length !== 1
    })
})

</script>
<template>
  <el-breadcrumb class="app-breadcrumb" separator-icon="ArrowRight">
    <transition-group name="breadcrumb" mode="out-in">
        <el-breadcrumb-item v-for="(item, index) in matched" :key="item.path">

            <el-icon size="14">
                <component :is="item.meta.icon"></component>
            </el-icon>
            <span
              v-if="item.redirect ==='noRedirect' || index == matched.length -1">
                {{ item.meta.title }}
            </span>
            <a v-else @click.prevent="handleLink(item)"> {{ item.meta.title }}</a>
        </el-breadcrumb-item>
    </transition-group>
  </el-breadcrumb>
</template>

<style scoped lang="scss">

.app-breadcrumb {
  margin-left: 20px;
}

:deep(.el-breadcrumb__inner) {
  display: flex;

  > i {
    margin-right: 3px;
  }
}
</style>